<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/Mine.css">
  <title>Document</title>
</head>
<body>
  <div id="appLoading">
   <img src="./images/loading.gif" width="50px" height="50px">
   <div class="loading-text">加载中......</div>
  </div>
  <div id="Mine">
    <el-container>
      <el-header>个人中心</el-header>
      <el-main>
        <div class="min-user">
          <div class="min-aver">
            <img src="./images/goods/logo.png" alt="">
          </div>
        </div>
        <mt-cell
          title="我的订单"
          href="#"
          is-link
          value="查看全部订单">
        </mt-cell>
        <div class="min-list">
          <ul>
            <li>
              <div class="min-lis-icon m-p1"></div>
              <div class="min-lis-name">待支付</div>
            </li>
            <li>
              <div class="min-lis-icon m-p2"></div>
              <div class="min-lis-name">待发货</div>
            </li>
            <li>
              <div class="min-lis-icon m-p3"></div>
              <div class="min-lis-name">待收货</div>
            </li>
            <li>
              <div class="min-lis-icon m-p4"></div>
              <div class="min-lis-name">交易完成</div>
            </li>
          </ul>
        </div>
        <div class="min-other">
          <mt-cell
            title="我的优惠券"
            is-link>
            <img src="./images/icon/Ecommerce-12.png" slot="icon" width="24" height="24">
          </mt-cell>
          <mt-cell
            title="地址管理"
            is-link>
            <img src="./images/icon/Ecommerce-45.png" slot="icon" width="24" height="24">
          </mt-cell>
          <mt-cell
            title="联系客服"
            is-link>
            <img src="./images/icon/Ecommerce-01.png" slot="icon" width="24" height="24">
          </mt-cell>
          <mt-cell
            title="修改个人信息"
            is-link>
            <img src="./images/icon/Ecommerce-48.png" slot="icon" width="24" height="24">
          </mt-cell>
        </div>
        <el-row>
          <mt-button type="primary" class="logout">登陆/注册</mt-button>
        </el-row>
        <el-row>
          <mt-button type="danger" class="logout">退出登陆</mt-button>
        </el-row>
      </el-main>
      <el-footer>
        <div class="footer">
          <ul>
            <li>
              <div class="foo-icon f-p1"></div>
              <div class="foo-name">商店</div>
            </li>
            <li>
              <div class="foo-icon f-p2"></div>
              <div class="foo-name">分类</div>
            </li>
            <li>
              <div class="foo-icon f-p3"></div>
              <div class="foo-name">玫瑰花</div>
            </li>
            <li>
              <div class="foo-icon f-p4"></div>
              <div class="foo-name">购物车</div>
            </li>
            <li>
              <div class="foo-icon f-p5"></div>
              <div class="foo-name">个人中心</div>
            </li>
          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</body>
  <script src="./js/vue.min.js"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script src="./js/element-ui.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#Mine',
      mounted(){
        document.getElementById('Mine').style.display = 'block';
        document.getElementById('appLoading').style.display = 'none';
      }
    })
  </script>
</html>
